<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item>
        <el-popover
          slot="title"
          placement="top-start"
          title=""
          trigger="hover"
          :disabled="!(showCheckList || item.dishName)"
          :content="showCheckList || item.dishName">
          <template slot="reference">
            <div class="hidden-text">
              <i class="header-icon el-icon-info"></i>
              {{ showCheckList || item.dishName }}
            </div>
          </template>
        </el-popover>
        <el-checkbox-group v-model="checkList" @change="groupNetworkChange(item.groupId)" v-if="netdiskList.length">
          <el-checkbox v-for="(netowrk,index) in netdiskList" @change="checked=>networkChange(checked, netowrk)" :key="netowrk.dishId" :label="netowrk.dishName" :disabled="netowrk.state === 2" :checked="netowrk.state === 1"></el-checkbox>
        </el-checkbox-group>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'group-network-list',

  props: ['item'],

  data() {
    return {
      loading: false,
      checkList: [],//选中的列表
      netdiskList: [] //全部网盘列表
    }
  },

  computed: {
    showCheckList: function() {
      return this.checkList.length ? this.checkList.join(',') : ''
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    //获取网络硬盘列表
    getData() {
      this.loading = true
      this.$store.dispatch('netdisk/fetchListUserDish', { groupId: this.item.groupId }).then(res => {
        // console.log('获取网络硬盘列表')
        // console.log(res)
        this.netdiskList = res
        // this.checkList = res.filter(item => item.state === 1 || item.state ===2)
        // console.log(this.checkList)
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //checkBox外层点击
    groupNetworkChange(id) {
      // console.log(id)
      // console.log(this.checkList)
    },

    //给群组分配网盘 可增可删
    networkChange: function(e, item) {
      this.loading = true
      if(e) {//e为未true，执行添加
        this.$store.dispatch('account/fetchAddUserDish', { groupId: this.item.groupId, dishId: item.dishId }).then(res => {
          // console.log('群组添加网盘参数')
          // console.log(res)
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err)
          return false
        })
      } else { //e为false，执行删除
        this.$store.dispatch('account/fetchDelUserDish', { groupId: this.item.groupId, dishId: item.dishId }).then(res => {
          // console.log('群组删除网盘参数')
          // console.log(res)
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err)
          return false
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

/deep/ .hidden-text {
  overflow: hidden;  /*溢出隐藏*/
  text-overflow: ellipsis; /*以省略号...显示*/
  white-space: nowrap;  /*强制不换行*/
  word-break:break-all;
  width: 1.6rem;
}
</style>
